<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>银行卡</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
	    <meta http-equiv="Access-Control-Allow-Origin" content="*">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/bankCard.css" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/rem.js"></script>
		<script src="js/common.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/vue-resource.min.js"></script>
		<style>
			.back_one {
				position: relative;
			}
			.jiebang {
				font-size: .14rem;
				position: absolute;
				top: .09rem;
				right: .2rem;
				display: block;
				border-radius: .05rem;
				border: none;
				outline: none;
			}
			.zhezhao {
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.6);
				position: fixed;
				top: 0;
				display: none;
			}
			.zzBox {
				width: 80%;
				height: 1.4rem;
				background-color: #ffffff;
				border-radius: .05rem;
				margin: 0 auto;
				margin-top: 1.4rem;
				overflow: hidden;
				position: relative;
			}
			.zz-p1 {
				color: #666666;
				text-align: center;
				margin-top: .2rem;
			}
			.zz-p2 {
				position: absolute;
				bottom: 0;
				width: 100%;

			}
			.p2-left {
				display: block;
				width: 50%;
				float: left;
				line-height: .4rem;
				text-align: center;
				border-top: 1px solid #c2c2c2;
				border-right: 1px solid #c2c2c2;
			}
			.p2-right {
				display: block;
				width: 50%;
				float: right;
				line-height: .4rem;
				border-top: 1px solid #c2c2c2;
				border-left: 1px solid #c2c2c2;
				text-align: center;

			}
		</style>
	</head>
	<body>
	<div id="app">
		<div class="header">
			<a href="javascript:history.back(-1)"><img class="left" src="images/g_next.png" alt="" /></a>
			银行卡
			<img onclick="location.href='add_bankCard.html'" class="TJ_card" src="images/g_tjyhk.png" alt="" />
		</div>
		<div style="height: 0.44rem;"></div>
		<ul class="bankCard_main">

			<!-- <li class="back_two">
				<p class="back_li_kahao">****  **** **** 9633</p>
			</li> -->
			<li class="back_one" style="background: url('images/youzheng.png') no-repeat; background-size: 100%;" v-for="item in list">
				<p class="back_li_kahao">545454</p>
				<button class="jiebang" @click="jieB">解绑</button>
			</li>
		</ul>
		<div class="zhezhao">
			<div class="zzBox">
				<p class="zz-p1">确认解绑此银行卡吗？</p>
				<p class="zz-p2">
					<span class="p2-left" @click="define">确认</span>
					<span class="p2-right" @click="cancel">取消</span>
				</p>
			</div>
		</div>
	</div>
	</body>
	<script>
		var app= new Vue({
			el:'#app',
			data:{
                list:[1,2,3]
			},
            methods:{
                jieB(){
                    $(".zhezhao").show()
                },
                cancel(){
                    $(".zhezhao").hide()
                },
                define(){
                    console.log(123);
                }
            }
		})
	</script>
</html>
